<!-- 首页 -->
<template>
    <div class='index'>

        <a-row type="flex" justify="center" align="top" style="margin: 15px 0;">
            <!-- 左边栏 -->
            <a-col class="left-sidebar" :span="17" :xs="23" :sm="23" :md="23" :lg="23" :xl="17" style="">
                <!-- 最新推荐 -->
                <div class="left-sidebar-recommend">
                    <a-card title="最新推荐" style="width: 98%;margin: auto;">
                        <a-card v-for="blog in blogList" :key="blog.id"
                            style="width: 98%;margin: auto;margin-bottom: 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
                            <h2 style="font-size: 22px;">
                                <router-link :to="'blog/' + blog.id" style="color: #67b3ef;">{{blog.title}}
                                </router-link>
                            </h2>
                            <p style="text-indent: 2em;margin-top: 10px;">{{blog.description}}</p>
                            <div style="font-size: 12px;margin-top: 10px;">
                                <span style="margin-right: 20px;">
                                    <a-icon type="user" />作者：{{blog.authorNickname}}
                                </span>
                                <span style="margin-right: 20px;">
                                    <a-icon type="calendar" /> 更新时间：{{blog.updateTime}}
                                </span>
                                <span style="margin-right: 20px;">
                                    <a-icon type="tag" />分类：{{blog.categoryName}}
                                </span>
                                <span style="margin-right: 20px;">
                                    <a-icon type="eye" />浏览量：{{blog.views}}
                                </span>
                            </div>
                            <div style="text-align: right;">
                                <a-button type="link" style="padding: 5px 10px;background-color: #cfe5f5;">
                                    <router-link :to="'blog/' + blog.id">阅读全文</router-link>
                                </a-button>
                            </div>
                        </a-card>

                        <div style="padding: 0 10px;text-align: right;">
                            <a-pagination :defaultPageSize="defaultPageSize" :current="current" :total="blogTotal"
                                @change="pageOnChange" />
                        </div>
                    </a-card>
                </div>
            </a-col>

            <!-- 右边栏 -->
            <a-col :span="5" align="middle" :xs="0" :sm="0" :md="0" :lg="0" :xl="5">
                <!-- 关于我 -->
                <a-card title="关于我" style="width: 100%;margin-bottom: 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
                    <div style="margin: auto;text-align: center;">
                        <img src="https://s1.ax1x.com/2020/10/11/0cZNdK.jpg" alt="" style="width: 200px;">
                        <p style="font-size: 32px;font-weight: bold;margin:10px 0;">
                            {{userInfo.nickname}}</p>
                        <!-- <p>座右铭</p> -->
                        <p style="margin-bottom: 5px;">{{userInfo.motto}}</p>
                        <p style="margin-bottom: 10px;">
                            <a-icon type="environment" />云南 | 楚雄
                        </p>
                        <a-popover>
                            <template slot="content">
                                <p>{{userInfo.qq}}</p>
                            </template>
                            <a-icon type="qq-circle" theme="filled" :style="{ fontSize: '30px', }"
                                style="margin: 0 10px;" />
                        </a-popover>
                        <a-popover>
                            <template slot="content">
                                <p>{{userInfo.email}}</p>
                            </template>
                            <a-icon type="mail" :style="{ fontSize: '30px', }" style="margin: 0 10px;" />
                        </a-popover>
                        <a-popover>
                            <template slot="content">
                                <a target="_blank" href="https://gitee.com/yuguofu">https://gitee.com/yuguofu</a>
                            </template>
                            <a-icon type="github" :style="{ fontSize: '30px', }" style="margin: 0 10px;" />
                        </a-popover>
                    </div>
                </a-card>

                <!-- 热门博文 -->
                <a-card title="热门博文" style="width: 100%;margin-bottom: 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
                    <p v-for="blog in hotBlogList" style="margin-bottom: 5px;text-align: left;">
                        <a-icon type="caret-right" />
                        <router-link :to="`blog/${blog.id}`" style="color: #67b3ef;">{{blog.title}}</router-link>
                    </p>

                </a-card>

                <!-- 友链 -->
                <a-card title="友链" style="width: 100%;margin-bottom: 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
                    <p v-for="fl in flinkList" style="margin-bottom: 5px;text-align: left;">
                        <a-icon type="caret-right" />
                        <a target="_blank" :href="fl.link" style="color: #67b3ef;">{{fl.siteName}}</a>
                    </p>
                </a-card>


            </a-col>
        </a-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                current: 1,
                defaultPageSize: 7,
                blogList: [],
                blogTotal: 0,
                hotBlogList: [],
                flinkList: [],
                userInfo: {},
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getUserInfo();
            this.getBlog();
            this.getHotBlog();
            this.getFlink();
        },
        //计算属性
        computed: {},
        //方法集合
        methods: {
            // 翻页
            pageOnChange(current) {
                this.current = current;
                // console.log(this.current);
                this.$axios.get(`blogs?PageNum=${current}&PageSize=${this.defaultPageSize}`).then((res) => {
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.blogList = res.data.data;
                });
            },
            // 首页博客
            getBlog() {
                this.$axios.get(`blogs?PageNum=${1}&PageSize=${this.defaultPageSize}`).then((res) => {
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.blogList = res.data.data;
                    this.blogTotal = res.data.total;
                });
            },
            // 最热博客
            getHotBlog() {
                this.$axios.get("blogs/hot/5").then((res) => {
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.hotBlogList = res.data.data;
                });
            },
            // 友链
            getFlink() {
                this.$axios.get("friendlylinks").then((res) => {
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.flinkList = res.data.data;
                });
            },
            // 用户信息
            getUserInfo() {
                this.$axios.get("users/1").then((res) => {
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.userInfo = res.data.data;
                });
            },
        },

    };
</script>
<style>
    .index {
        /* min-height: 600px; */
        height: 100%;
    }

    .ant-card-head-title {
        color: #dcb442 !important;
        font-weight: bold !important;
    }

    .ant-row-flex-space-around {
        justify-content: center !important;
    }


    @media only screen and (min-width: 540px) {
        .left-sidebar {
            height: 99%;
            padding: unset;
        }

        .left-sidebar-recommend {
            padding: unset;
        }
    }

    @media only screen and (min-width: 768px) {
        .left-sidebar {
            height: 99%;
            padding: unset;
        }

        .left-sidebar-recommend {
            padding: unset;
        }
    }

    @media only screen and (min-width: 1024px) {
        .left-sidebar {
            height: 99%;
            padding: 0 50px !important;
        }

        .left-sidebar-recommend {
            padding: 0 20px;
        }
    }
</style>